<template>
  <div>
    <div
      v-if="isSearchFormComp"
      @click="click2Add"
      :class="disabled ? 'disabled-user-select' : ''"
      style="
        padding: 0 5px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-sizing: border-box;
        display: flex;
        color: #9e9e9e;
        font-size: 14px;
        flex-wrap: wrap;
        min-height: 32px;
      "
    >
      <template v-if="selectedUserList.length > 0">
        <SelectedUserItem
          v-for="item in showUserList"
          :info="item"
          @unSelect="unSelectUser"
          query
        />
      </template>
      <span
        v-else
        style="
          height: 30px;
          line-height: 30px;
          display: inline-block;
          margin-left: 7px;
          color: #bfbfbf;
        "
        >请选择用户</span
      >
      <div v-if="ellipsisInfo.status" class="user-selected-item">
        <div class="user-select-ellipsis">
          <span style="color: red">+{{ ellipsisInfo.count }}...</span>
        </div>
      </div>
    </div>

    <div v-else style="display: flex; flex-wrap: wrap; flex-direction: row">
      <template v-if="selectedUserList.length > 0">
        <SelectedUserItem
          v-for="item in selectedUserList"
          :info="item"
          @unSelect="unSelectUser"
        />
      </template>
      <a-button v-if="showAddButton" shape="circle" @click="onShowModal"
        ><PlusOutlined
      /></a-button>
    </div>

    <user-select-modal
      :multi="multi"
      :getContainer="getContainer"
      @register="registerModal"
      @selected="onSelected"
      :izExcludeMy="izExcludeMy"
    ></user-select-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, watch, ref, computed, toRaw } from "vue";
import { Form } from "ant-design-vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { useModal } from "/@/components/Modal";
import UserSelectModal from "./UserSelectModal.vue";
import { defHttp } from "/@/utils/http/axios";
import SelectedUserItem from "./SelectedUserItem.vue";

export default defineComponent({
  name: "UserSelect",
  components: {
    PlusOutlined,
    UserSelectModal,
    SelectedUserItem,
  },
  props: {
    store: {
      type: String,
      default: "id",
    },
    value: {
      type: String,
      default: "",
    },
    multi: {
      type: Boolean,
      default: false,
    },
    getContainer: {
      type: Function,
      default: null,
    },
    // 是否作为查询条件
    query: {
      type: Boolean,
      default: false,
    },
    //最多显示几个人员-query为true有效
    maxCount: {
      type: Number,
      default: 2,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    //是否排除我自己
    izExcludeMy: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:value", "change"],
  setup(props, { emit }) {
    const formItemContext = Form.useInjectFormItemContext();
    const loading = ref(true);
    const selectedUserList = ref<any[]>([]);
    const showUserList = computed(() => {
      let list = selectedUserList.value;
      let max = props.maxCount;
      if (list.length <= max) {
        return list;
      }
      return list.filter((_item, index) => index < max);
    });
    const ellipsisInfo = computed(() => {
      let max = props.maxCount;
      let len = selectedUserList.value.length;
      if (len > max) {
        return { status: true, count: len - max };
      } else {
        return { status: false };
      }
    });

    // 注册弹窗
    const [registerModal, { openModal, closeModal }] = useModal();
    function onShowModal() {
      if (props.disabled === true) {
        return;
      }
      let list = toRaw(selectedUserList.value);
      openModal(true, {
        list,
      });
    }

    function onSelected(arr) {
      console.log("onSelected", arr);
      selectedUserList.value = arr;
      onSelectedChange();
      closeModal();
    }

    function onSelectedChange() {
      loading.value = false;
      let temp: any[] = [];
      let arr = selectedUserList.value;
      if (arr && arr.length > 0) {
        temp = arr.map((k) => {
          return k[props.store];
        });
      }
      let str = temp.join(",");
      emit("update:value", str);
      emit("change", str);
      formItemContext.onFieldChange();
      console.log("选中数据", str);
    }

    watch(
      () => props.value,
      async (val) => {
        if (val) {
          if (loading.value === true) {
            await getUserList(val);
          }
        } else {
          selectedUserList.value = [];
        }
        loading.value = true;
      },
      { immediate: true }
    );

    async function getUserList(ids) {}

    const showAddButton = computed(() => {
      if (props.disabled === true) {
        return false;
      }
      if (props.multi === true) {
        return true;
      } else {
        if (selectedUserList.value.length > 0) {
          return false;
        } else {
          return true;
        }
      }
    });

    function unSelectUser(id) {
      console.log("unSelectUser", id);
      let arr = selectedUserList.value;
      let index = -1;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == id) {
          index = i;
          break;
        }
      }
      if (index >= 0) {
        arr.splice(index, 1);
        selectedUserList.value = arr;

        onSelectedChange();
      }
    }

    function click2Add(e) {
      e.preventDefault();
      e.stopPropagation();
      onShowModal();
    }

    const isSearchFormComp = computed(() => {
      if (props.query === true) {
        return true;
      } else {
        return false;
      }
    });

    return {
      registerModal,
      onShowModal,
      isSearchFormComp,
      onSelected,
      showAddButton,
      unSelectUser,
      selectedUserList,
      showUserList,
      ellipsisInfo,
      click2Add,
    };
  },
});
</script>

<style lang="less" scoped>
.user-select-ellipsis {
  width: 40px;
  height: 24px;
  text-align: center;
  line-height: 22px;
  border-radius: 8px;
  background: #f5f5f5;
  border: 1px solid #f0f0f0;
}
.disabled-user-select {
  cursor: not-allowed;
  background-color: #f5f5f5 !important;
}
</style>
